{% extends "base.html" %}
{% load humanize %}
{% load bootstrap_pagination %}

{% block content %}
    <div class="row">
        <div class="col-md-8">
            <div class="panel panel-default">
                <div class="panel-heading">
                    <h3 class="panel-title">
                        文章列表
                        {% if current_category %}» <a href="{% url 'translations:list' current_category.id %}">{{ current_category.name }}</a>{% endif %}
                        <small>共有 {{ articles.paginator.count }} 篇文章，当前第 {{ articles.number }} 页，共 {{ articles.paginator.num_pages }} 页</small>
                        <small class="pull-right">
                            排序方式：<a href="{{ sort_urls.published }}">发布时间</a> |
                                                <a href="{{ sort_urls.views }}">浏览量</a>
                        </small>
                    </h3>
                </div>
                <div class="panel-body">
                    {% for article in articles %}
                        {% if forloop.counter0 %}<hr>{% endif %}
                        <h4><a href="{% url 'translations:detail' article.id %}">{{ article.title }}</a></h4>
                        <small><a href="{{ article.recommend_user.profile.get_absolute_url }}">{{ article.recommend_user.profile }}</a> 推荐于 {{ article.recommend_date|naturaltime }}</small>
                        <p>{{ article.section_set.first.best_translation.content|striptags|truncatewords:6 }}</p>
                    {% endfor %}

                    {% if articles.paginator.num_pages > 1 %}
                        <hr>
                        {% bootstrap_paginate articles range=10 %}
                    {% endif %}
                </div>
            </div>
        </div>

        <div class="col-md-4">
            <div class="panel panel-default">
                <div class="panel-heading">
                    <h3 class="panel-title">文章分类</h3>
                </div>
                <div class="list-group">
                    {% for category in categories %}
                    <a href="{% url 'translations:list' category.id %}" class="list-group-item{% if category == current_category %} active{% endif %}">{{ category.name }}<span class="badge">{{ category.num_articles }}</span></a>
                    {% endfor %}
                </div>
            </div>
        </div>
    </div>
{% endblock %}